<template>
  <div class="cookie-consent" v-if="visible" :class="{ 'slide-up': animateIn }">
    <div class="cookie-content">
      <div class="cookie-header">
        <h3>Cookie Policy</h3>
        <div class="cookie-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM15.3 14.35C15.5 14.63 15.5 15.07 15.22 15.35C15.08 15.49 14.9 15.56 14.72 15.56C14.54 15.56 14.36 15.49 14.22 15.35L12 13.13L9.78 15.35C9.64 15.49 9.46 15.56 9.28 15.56C9.1 15.56 8.92 15.49 8.78 15.35C8.5 15.07 8.5 14.63 8.7 14.35L10.92 12.13L8.7 9.91C8.42 9.63 8.42 9.19 8.7 8.91C8.98 8.63 9.42 8.63 9.7 8.91L11.92 11.13L14.14 8.91C14.42 8.63 14.86 8.63 15.14 8.91C15.42 9.19 15.42 9.63 15.14 9.91L12.92 12.13L15.3 14.35Z" fill="#AE8877"/>
          </svg>
        </div>
      </div>
      <div class="cookie-body">
        <p>
          This website uses cookies to enhance your browsing experience, analyze site traffic, and personalize content. 
          By clicking "Accept", you consent to our use of cookies. For more information, please see our 
          <a href="/privacy-policy">Privacy Policy</a>.
        </p>
      </div>
      <div class="cookie-actions">
        <button class="btn-decline" @click="handleDecline">Decline</button>
        <button class="btn-accept" @click="handleAccept">Accept</button>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue';

const COOKIE_CONSENT_KEY = 'cookie_consent_accepted';
const visible = ref(false);
const animateIn = ref(false);

// 检查是否已经同意
const checkConsent = (): boolean => {
  const consentStatus = localStorage.getItem(COOKIE_CONSENT_KEY);
  return consentStatus === 'true';
};

// 接受 Cookie
const handleAccept = () => {
  localStorage.setItem(COOKIE_CONSENT_KEY, 'true');
  hideConsent();
};

// 拒绝 Cookie
const handleDecline = () => {
  // 不设置本地存储，或设置为 false，以便下次访问时再次显示
  localStorage.setItem(COOKIE_CONSENT_KEY, 'false');
  hideConsent();
};

// 隐藏同意提示
const hideConsent = () => {
  animateIn.value = false;
  setTimeout(() => {
    visible.value = false;
  }, 300); // 等待动画完成
};

// 显示同意提示
const showConsent = () => {
  visible.value = true;
  // 使用 setTimeout 确保 DOM 更新后应用动画类
  setTimeout(() => {
    animateIn.value = true;
  }, 10);
};

onMounted(() => {
  // 检查是否已同意，如未同意则显示提示
  if (!checkConsent()) {
    setTimeout(() => {
      showConsent();
    }, 1000); // 延迟一秒显示，避免页面加载时就立即弹出
  }
});
</script>

<style scoped>
.cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.cookie-consent.slide-up {
  transform: translateY(0);
}

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px;
}

.cookie-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.cookie-header h3 {
  margin: 0;
  font-size: 18px;
  color: #232323;
  font-weight: 600;
}

.cookie-icon {
  cursor: pointer;
}

.cookie-body {
  margin-bottom: 16px;
}

.cookie-body p {
  font-size: 14px;
  line-height: 1.5;
  color: #606060;
  margin: 0;
}

.cookie-body a {
  color: #AE8877;
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-decline, .btn-accept {
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-decline {
  background-color: transparent;
  border: 1px solid #d0d0d0;
  color: #232323;
}

.btn-decline:hover {
  background-color: #f5f5f5;
}

.btn-accept {
  background-color: #232323;
  border: 1px solid #232323;
  color: white;
}

.btn-accept:hover {
  background-color: #434343;
}

@media (max-width: 768px) {
  .cookie-content {
    padding: 16px;
  }
  
  .cookie-header h3 {
    font-size: 16px;
  }
  
  .cookie-body p {
    font-size: 13px;
  }
  
  .cookie-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .btn-decline, .btn-accept {
    width: 100%;
    padding: 12px;
  }
}
</style> 